<template>
    <div :class="mini ? 'mini detail-card' : 'border detail-card'">
        <h4 v-if="title">{{ title }}</h4>
        <div style="height:12px;" v-if="title"></div>
        <div class="layout">
            <slot name="top"></slot>
            <template v-for="item in labels" :key="item[0]">
                <detial :prop="item[0]" :label="item[1]" :data="data" :label_width="label_width"></detial>
            </template>
        </div>
        <slot></slot>
    </div>
</template>

<script lang="ts" setup>
import type { interForm } from "@b/model/base/type";
import Detial from "./__detail.vue";

interface prop {
    mini?: boolean
    cover?: string
    label_width?: string
    labels: Map<string, interForm>
    data: any
    title?: string
}
withDefaults(defineProps<prop>(), { cover: '33%' })
</script>

<style scoped>
.border {
    padding: 10px;
    margin: 10px;
}

.mini .el-form-item {
    width: v-bind(cover);
    margin-right: 0;
}

.detail-card {
    position: relative;
    border-radius: 0 0 12px 12px;
    background: #fff;
}

.detail-card+.detail-card {
    border-radius: 12px;
}

.layout {
    display: flex;
    flex-wrap: wrap;
    padding: 0 20px;
    font-size: 0.9em;
}

.layout .title {
    color: #555;
    white-space: nowrap;
    text-align: right;
}

.layout>div {
    min-width: v-bind('cover');
    margin-bottom: 16px;
    display: flex;
    align-items: flex-start;
}
</style>